<template>
	<view class="">
		<view class="footer-btn" @click="on_Click()"> 签字版 </view>
		<img :src="url" alt="" srcset="" />
		<l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" landscape></l-signature>
		<!-- 销售顾问 -->
		<u-popup @touchmove.stop :show="consultant" @close="closeAmount2" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup">
				<view class="store-popup">
					<view class="title flex-between">
						<text>请签家长本人姓名</text>
						<u-icon @click="closetant" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
					</view>
					<scroll-view class="scroll-view_H" scroll-y="true" :scroll-top="scrollTop">
						<view style="width: 100% ;height: 350rpx;padding: 20rpx 0; border: 1rpx #c8c8c8 solid;margin-left: 3%;">
						    <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" landscape></l-signature>
						</view>
						<view>
							<view class="clear_s" @click="onClick('clear')"> 清空 </view>
						    <!-- <button @click="onClick('clear')">清空</button>
						    <button @click="onClick('undo')">撤消</button> -->
							<view class="footer-btn" @click="onClick('save')"> 提交 </view>
						    <!-- uvue 不支持 openSmooth -->
						    <!-- <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
						</view>
					</scroll-view>
				</view>
		
			</view>
		</u-popup>
		
	</view>

</template>
<script>
	export default {
	    data() {
	        return {
	            title: 'Hello',
	            penColor: 'red',
	            penSize: 5,
	            url: '',
	            openSmooth: true,
				consultant:false
	        }
	    },
	    methods: {
			on_Click() {
				this.url = ''
				this.consultant = true;
			},
			closetant() {
				this.consultant = false
			},
			closeAmount2() {
				this.consultant = false;
			},
	        onClick(type) {
	             if(type == 'openSmooth') {
	                 this.openSmooth = !this.openSmooth
	                 return
	             }
	            if (type == 'save') {
	                this.$refs.signatureRef.canvasToTempFilePath({
	                    success: (res) => {
	                        // 是否为空画板 无签名
	                        console.log(res.isEmpty,'res.isEmpty')
	                        // 生成图片的临时路径
	                        // H5 生成的是base64
	                        this.url = res.tempFilePath
							console.log( this.url,' this.url')
	                    }
	                })
	                return
	            }
	            if (this.$refs.signatureRef)
	                this.$refs.signatureRef[type]()
	        }
	    }
	}
</script>

<style lang="scss">
	.footer-btn {
		width: 94%;
		padding: 30rpx 50rpx;
		margin-left: 3%;
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		background:  #528eff;
		border-radius: 50rpx;
		text-align: center;
		
	}
	
	.clear_s{
		text-align: right;
		margin: 10rpx 30rpx;
	}
	.store-popup {
		padding: 20rpx 0;
	
	
		.item {
			margin-top: 30rpx;
	
			.info {
				margin-left: 20rpx;
	
				.name {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}
	
				.phone {
					font-size: 24rpx;
					font-weight: 500;
					color: #bebebe;
					margin-top: 10rpx;
				}
			}
		}
	
		// }
		.title {
			padding: 0px 30rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #cccccc;
			font-weight: bold;
	
			.clo {
				color: #2f75fa;
			}
		}
	
	
		.btn {
			padding: 0px 30rpx;
			margin-top: 20rpx;
		}
	}
</style>